<template>
  <div 
    class="ant-upload-list ant-upload-list-picture"
    :class="file.status === 'error' ? 'ant-upload-list-item-error' : ''">
    <div class="ant-upload-list-item" :class="prefixCls + '-item'">
      <div class="ant-upload-list-item-thumbnai">
        <MySimpleAudioPlayer 
          :audioList="[{url: file.url}]"
          :show-prev-button="false"
          :show-next-button="false"
          :show-playback-rate="false"
          :show-volume-button="false"
          :show-progress-bar="false"
          :isLoop="false"
          @loaded-metadata="({ duration }) => state.duration = duration"
        />
      </div>
      <span :class="prefixCls + '-voice-duration'">
        {{ state.duration ? state.duration : '0.00' }}
      </span>

      <span class="ant-upload-list-item-name">{{ file.name }}</span>
      <span class="ant-upload-list-item-actions picture ">
        <a-button  
          @click="handleRemove" size="small" 
          type="text" title='移除文件' 
          class="ant-upload-list-item-action ant-btn-icon-only" :class="prefixCls + '-action'">
          <Icon icon="ant-design:delete-outlined"></Icon>
        </a-button>
      </span>
    </div>
  </div>
</template>
<script lang="ts" name="file-record" setup>
import { ref, unref, onMounted, onUnmounted, watchEffect, reactive } from 'vue'
import { propTypes } from '/@/utils/propTypes';
import MySimpleAudioPlayer from '/@/components/My/MySimpleAudioPlayer.vue'
import { useDesign } from '/@/hooks/web/useDesign';
import { Icon } from '/@/components/Icon';

const emit = defineEmits(['remove', 'download']);
const { prefixCls } = useDesign('select-material');
const state = reactive<any>({
  duration: '0.00'
})
const props = defineProps({
  width: propTypes.string.def('300px'),
  file: propTypes.object.def({}),
});


onUnmounted(() => {
  console.log('onUnmounted-props', unref(props));
})

watchEffect(() => {
 
});

const handleDownload = () => {
  emit('download')
}

const handleRemove = () => {
  emit('remove')
}

</script>

<style lang="less">
@prefix-cls: ~'@{namespace}-select-material';

.@{prefix-cls}-item {
  display: flex;
  align-items: center;
}


.@{prefix-cls}-action:hover {
  color: #ff4d4f;;
  -webkit-transition: all .5s;
  transition: all .5s;
}

.@{prefix-cls}-voice-duration {
  margin-left: -10px;
  margin-right: 5px;
}
</style>
